<template>
  <div class="main flex">
    <div class="wk-box skin-box" v-bind:class="this.$pageView.skin">
      <div class="page-title">{{this.$pageView.title}}</div>
      <div class="page-describe">{{this.$pageView.describe}}</div>
      <div :id="item.id" :is="item.component" v-if="item" :obj="item" v-for="(item, i) in items" :key="i"></div>
    </div>
    <div class="pp-box">
      <div class="proup" id="checkboxPP">
        <div class="ptem">
          <div class="i6d6">默认风格</div>
          <div class="i6d6 skin-colos">
            <a v-bind:class="[skin.color]" v-on:click="select_skin(skin.skin)" v-for="skin in skins"></a>
          </div>
        </div>
        <hr>
        <div class="ptem">
          <div class="i6d6">常用风格</div>
          <div class="i6d6 skin-colos">
            <a v-bind:class="[skin.color]" v-on:click="select_skin(skin.skin)" v-for="skin in commonSkins"></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import address from './libs/address'
import checkbox from './libs/checkbox'
import date from './libs/date'
import email from './libs/email'
import hr from './libs/hr'
import input from './libs/input'
import inputCurrency from './libs/input-currency'
import inputNumber from './libs/input-number'
import page from './libs/page'
import radio from './libs/radio'
import select from './libs/select'
import selectMulti from './libs/select-multi'
import tableDefault from './libs/table-default'
import tableLeft from './libs/table-left'
import tableTop from './libs/table-top'
import tel from './libs/tel'
import textarea from './libs/textarea'
import upatta from './libs/upatta'
import upimg from './libs/upimg'
import word from './libs/word'
import place from './libs/place'

export default {
components: {
    'v-address': address,
    'v-checkbox': checkbox,
    'v-date': date,
    'v-email': email,
    'v-hr': hr,
    'v-input': input,
    'v-input-currency': inputCurrency,
    'v-input-number': inputNumber,
    'v-page': page,
    'v-radio': radio,
    'v-select': select,
    'v-select-multi':selectMulti,
    'v-table-default': tableDefault,
    'v-table-left': tableLeft,
    'v-table-top': tableTop,
    'v-tel': tel,
    'v-textarea': textarea,
    'v-upatta': upatta,
    'v-upimg': upimg,
    'v-word': word,
    'v-place':place
  },
  data: function () {
    return {
      config: this.$app_config,
      items: this.$pageView.formItems,
      pageView:this.$pageView,
      skins:[{
        color:'c-fff',
        skin:'skin-fff'
      },{
        color:'c-eee',
        skin:'skin-eee'
      },{
        color:'c-222',
        skin:'skin-222'
      },{
        color:'c-f6dbd8',
        skin:'skin-f6dbd8'
      },{
        color:'c-c8efe9',
        skin:'skin-c8efe9'
      },{
        color:'c-cfdfc5',
        skin:'skin-cfdfc5'
      },{
        color:'c-cee1f9',
        skin:'skin-cee1f9'
      },{
        color:'c-c1c1d7',
        skin:'skin-c1c1d7'
      },{
        color:'c-f5f2e6',
        skin:'skin-f5f2e6'
      }],
      commonSkins:[{
        color:'c-f6dbd8',
        skin:'skin-f6dbd8'
      },{
        color:'c-c8efe9',
        skin:'skin-c8efe9'
      },{
        color:'c-cfdfc5',
        skin:'skin-cfdfc5'
      }]
    }
  },
  computed: {
      skin () {
        return this.$store.state.skin
      }
  },
  methods:{
    closePreview:function(event){
      if(event.target.className == 'preview-wrap'){
        this.$app_config.showPreview=false
      }
    },
    select_skin:function(skin){
      this.$pageView.skin=skin 
    }
  }
}
</script>